<template>
  <div class="container-page-classify">
    <van-search v-model="valueSearch" placeholder="请输入搜索关键词" @click="routerLink(`searchPage`)" />
    <div class="container-body">
      <van-sidebar v-model="activeIndex" class="group-sidebar">
        <van-sidebar-item v-for="(temp, index) in list_shopCategory" :key="index" class="item-sidebar" :title="temp.category_name" />
      </van-sidebar>
      <div class="group-itemClassify">
        <itemClassfiy :title="title_product" :value="list_product" />
      </div>
    </div>
    <!-- 导航栏 -->
    <itemTabbar now-page="1" />
  </div>
</template>

<script>
// api
import { shopCategory, productCategory } from '@/api/miva'
// item
import itemClassfiy from '@/components/item/item-classfiy'
import itemTabbar from '@/components/miva-item/item-tabbar'
export default {
  components: {
    itemClassfiy,
    itemTabbar
  },
  data() {
    return {
      list_shopCategory: [{}],
      list_product: [],
      valueSearch: '',
      activeIndex: 0,
      items: [{ text: '庆阳西瓜' }, { text: '庆阳栗子' }]
    }
  },
  computed: {
    title_product() {
      return this.list_shopCategory[this.activeIndex].category_name
    }
  },
  watch: {
    async activeIndex() {
      // 重新获取商品分类列表
      await this.getProductSpecification()
    }
  },
  async mounted() {
    // 获取商品大分类
    await this.getShopCategory()
    // 获取商品分类列表
    await this.getProductSpecification()
  },
  methods: {
    // 获取商品大分类
    async getShopCategory() {
      const { data = [] } = await shopCategory()
      this.list_shopCategory = data
    },
    // 获取商品分类列表
    async getProductSpecification() {
      console.log(this.list_shopCategory[this.activeIndex])
      const { id } = this.list_shopCategory[this.activeIndex]
      const { data = [] } = await productCategory({ id })
      this.list_product = data.data
    },
    routerLink(href) {
      this.$router.push({
        name: href
      })
    }
  }
}
</script>

<style lang="less">
.container-page-classify {
  box-sizing: border-box;
  .container-body {
    width: 100%;
    max-height: calc(100vh - 150px);
    display: flex;
    overflow: hidden;
  }
  .group-sidebar {
    max-width: 100px;
    min-width: 100px;
    height: calc(100vh - 140px);
    overflow-y: scroll;
    background: #fff;
  }
  .group-itemClassify {
    width: 100%;
    position: relative;
  }
  .item-sidebar {
    background-color: #fff;
  }
  .van-sidebar-item--select {
    background-color: #f5f6f8;
  }
  .van-field__control[type="search"] {
    -webkit-appearance: none;
    text-align: center;
  }
  .van-field__left-icon {
    position: absolute;
    left: 90px;
  }
  .van-search__content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-left: 8px;
    background-color: #f7f8fa;
    border-radius: 2px;
    border-radius: 30px;
  }
}
</style>
